<template>
  <div class="cycle" @mouseover="pauseIt = true" @mouseout="pauseIt = false">
    <div v-for="i in num" class="cycle-single" :style="comStyle">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pauseIt: false,
    };
  },
  props: {
    time: {
      type: Number,
      default: 10,
    },

    paused: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    // 防止数据过少
    comStyle() {
      if (this.paused) {
        return "";
      } else if (this.pauseIt) {
        return { animation: `move ${this.time}s infinite linear`, "animation-play-state": "paused" };
      } else {
        return {
          animation: `move ${this.time}s infinite linear`,
        };
      }
    },

    num() {
      if (this.paused) {
        return 1;
      } else {
        return 2;
      }
    },
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.cycle {
  width: 100%;
  height: 100%;
  overflow: hidden;
  & > div {
    //display:list-item;
    width: 100%;
    // animation: move 10s infinite linear;
    margin: 0;
    padding: 0;
  }

  &:hover {
    & > div {
      animation-play-state: paused;
    }
  }
}
</style>
